<template>
  <div class="app-container">
    <div>
      <el-form :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="loginLogQuery.name" style="width:150px" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input  v-model="loginLogQuery.ip" placeholder="请输入IP"></el-input>
        </el-form-item>
        <el-form-item label="访问开始时间">
          <el-date-picker
            v-model="loginLogQuery.accessTimeBegin"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="访问结束时间">
          <el-date-picker
            v-model="loginLogQuery.accessTimeEnd"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selectByPage()">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="refreshSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-button type="danger"  icon="el-icon-delete" size="mini" @click="deleteAll()">批量删除</el-button>
    <el-table :data="list" @selection-change="handleSelectionChange" fit border style="width: 100%" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="ip" label="ip地址"> </el-table-column>
      <el-table-column prop="msg" label="消息"> </el-table-column>
      <el-table-column prop="accessTime" label="访问时间"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            title="删除"
            @click="deleteById(scope.row.id)"
            ></el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="selectByPage"
      :current-page="page"
      :total="total"
      :page-size="limit"
      layout="total, prev, pager, next"
    >
    </el-pagination>
  </div>
</template>
  
<script>
//引入loginLog.js
import loginLogApi from "@/api/log/loginLog";

export default {
  name: "",
  data() {
    return {
      list: null, //表格对应的数据
      page: 1, //当前页
      limit: 5, //每页有多少条
      total: 0, //总记录数

      //批量删除
      deleteIds: [],
      loginLogQuery: {}
    };
  },
  created() {
    this.selectByPage(this.page);
    /*loginLogApi.selectByPage(this.page, this.limit).then((response) => {
      console.log(response);
      this.list = response.data.list;
      this.total = response.data.total;
    });*/
  },
  methods: {
    selectByPage(page = 1) {
      console.log(this.loginLogQuery);
      this.page = page;
      loginLogApi.selectByPage(this.page, this.limit, this.loginLogQuery).then((jsonResult) => {
        console.log(jsonResult);
        this.list = jsonResult.data.list;
        //Invalid prop: type check failed for prop "total". Expected Number with value 8, got String with value "8".
        //把long类型转换成Number类型
        this.total = jsonResult.data.total - 0;
      });
    },
    refreshSearch() {
      this.loginLogQuery = {}
    },
    deleteById(id) {
      //弹出确认删除的提示框
      this.$confirm("您确认要删除么?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        loginLogApi.deleteById(id).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            //删除成功之后，查询最新的数据
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      });
    },
    handleSelectionChange(selections) {
      console.log(selections);
      this.deleteIds = selections.map(item => item.id);
      console.log(this.deleteIds);
    },
    deleteAll() {
      if(this.deleteIds.length == 0) {
        this.$message({
          type: "error",
          message: '请选择要删除的信息',
        });
        return;
      } 

      this.$confirm("您确认要删除么?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        loginLogApi.deleteAll(this.deleteIds.join(',')).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            //删除成功之后，查询最新的数据
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      });
    },
  },
};
</script>
 
<style scoped>
</style>